<template>
	<view class="xubao-detail">
		<view class="detail-content">
			<view class="van-cell-item">
				<van-cell title="客户姓名" :value="itemData.name ? itemData.name: '-'" />
			</view>
			<view class="van-cell-item">
				<van-cell title="车牌号" :value="itemData.lsn ? itemData.lsn : '-'" />
			</view>
			<view class="van-cell-item">
				<van-cell title="车架号" :value="itemData.vin ? itemData.vin: '-'" />
			</view>
			<!-- 联系电话 -->
			<view class="detail-iscompleted">
				<view class="detail-completed-form">
					<view class="detail-completed-title">
						<text class="completed-title-text">联系电话</text>
					</view>
					<view class="detail-completed-radio-group" v-if="isCallPhoneShow"
						@click.stop="callPhone(itemData.tel)">
						<text class="phone-number">{{itemData.tel}}</text>
						<van-icon class="phone-icon" name="phone" />
					</view>
					<view class="detail-completed-radio-group no-phone" v-else>
						<text class="phone-number">-</text>
					</view>
				</view>
			</view>
			<view class="van-cell-item">
				<van-cell title="维系类型" :value="itemData.type ?itemData.type : '-'" />
			</view>
			<view class="van-cell-item">
				<van-cell title="任务名称" :value="itemData.subject ? itemData.subject: '-'" />
			</view>
			<view class="van-cell-item" v-if="itemData.appointmentTime">
				<van-cell title="预约时间" :value="itemData.appointmentTime" />
			</view>
			<view class="van-cell-item" v-if="itemData.nextKeepTime">
				<van-cell title="下次联系时间" :value="itemData.nextKeepTime" />
			</view>
		</view>

		<!-- 维系履历 -->
		<view class="history-wx-list">
			<view class="history-wx-list-title">维系履历</view>
			<view class="history-wx-item-box" v-if="wxRecord.length > 0">
				<view class="history-wx-item" v-for="(item, index) in wxRecord" :key="index">
					<view class="history-wx-item-header">
						<view class="wx-item-header-left">{{item.subject}}</view>
						<view class="wx-item-header-right">{{item.finishTime}}</view>
					</view>
					<view class="history-wx-item-content">
						<view class="history-wx-item-content-text">维系结果：{{item.result}}</view>
						<view class="history-wx-item-content-text">维系人：{{item.personLiable}}</view>
					</view>
				</view>
			</view>

			<view class="no-history-wx-box" v-else>
				<image class="no-data-icon" src="../../static/no-data.png" mode="widthFix"></image>
				<text class="no-data-text">无维系履历</text>
			</view>
		</view>


		<view class="height"></view>

		<button class="result-btn" @click.stop="handleWorkResult" v-if="isSubmitResultShow">执行结果录入</button>
		<button class="result-btn" @click.stop="handleEditWorkResult" v-else>修改提交结果</button>
	</view>
</template>

<script>
	import apiRqs from "@/api/api-request.js";
	export default {
		data() {
			return {
				workType: "",
				itemData: {},
				isCallPhoneShow: false,
				isSubmitResultShow: true,
				wxRecord: [],
			}
		},
		onLoad(options) {
			const itemData = uni.getStorageSync("xubaoItem");
			if (itemData.tel && itemData.tel != "0") {
				this.isCallPhoneShow = true;
			} else {
				this.isCallPhoneShow = false;
			}
			this.itemData = itemData;
			if (options.type == 'continue' || options.type == 'finished' || options.type == 'abandon') {
				this.isSubmitResultShow = false;
			} else {
				this.isSubmitResultShow = true;
			}
			this.workType = options.type;
			this.getUserWxRecord(itemData.lsn, itemData.vin);
		},
		methods: {

			handleWorkResult() {
				uni.navigateTo({
					url: "/packageD/xubao/xubao-result"
				})
			},
			handleEditWorkResult() {
				uni.navigateTo({
					url: "/packageD/xubao/xubao-result?type=edit"
				})
			},
			// 获取当前用户维系履历
			getUserWxRecord(lsn, vin) {
				const wxType = uni.getStorageSync("wxType");
				const tokenInfo = uni.getStorageSync("tokenInfo");
				let type = "";
				if (wxType == 'dingbao') {
					type = "定保";
				} else if (wxType == 'xubao') {
					type = "续保";
				}
				let rqsData = {
					"lsn": lsn,
					"vin": vin,
					"shopId": tokenInfo.shopId,
					"type": type,
					"paged": {
						"pageSize": 9999,
						"pageIndex": 1,
						"orderBy": "asc"
					}
				};
				console.log('rqsData', rqsData);
				getApp().showLoading();
				apiRqs._getHistoryWxList(rqsData).then((res) => {
					uni.hideLoading();
					console.log('当前用户维系履历', res);
					if (res.code == 200) {
						const newData = JSON.parse(JSON.stringify(res.data.data));
						this.wxRecord = newData;
					} else {
						getApp().showToast(res.msg);
					}
				})
			},
			// 拨打电话
			callPhone(phone) {
				if (phone.length != 11) {
					getApp().showToast('号码格式不对，无法拨出');
					return false;
				} else {
					uni.makePhoneCall({
						phoneNumber: phone
					});
				}
			},
		},
	}
</script>

<style lang="less">
	page {
		background-color: #f5f5f5;
	}

	.xubao-detail {
		.height {
			height: calc(40px + 35pt);
		}

		.detail-content {
			margin: 20px;

			.detail-iscompleted {
				background-color: #fff;

				.detail-completed-form {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 16px 0px 16px 17px;

					.detail-completed-title {
						display: flex;
						align-items: center;


						.completed-title-text {
							font-size: 14px;
							color: rgba(0, 0, 0, 0.4);
						}
					}

					.detail-completed-radio-group {
						display: flex;
						align-items: center;

						.phone-number {
							font-size: 14px;
							color: rgba(0, 0, 0, 0.8);
						}

						.phone-icon {
							font-size: 20px;
							color: #008aff;
							margin: 0 12px 0 5px;
						}

						&.no-phone {
							.phone-number {
								font-size: 14px;
								color: rgba(0, 0, 0, 0.8);
								margin: 0 15px 0 5px;
							}
						}
					}
				}
			}

			.van-cell-item {
				.van-cell {
					padding-top: 16px;
					padding-bottom: 16px;

					.van-cell__title {
						flex: 0.8;
						color: rgba(0, 0, 0, 0.4);
					}

					.van-cell__value {
						flex: 1.2;
						color: rgba(0, 0, 0, 0.8);
					}
				}

				&:first-child {
					.van-cell {
						border-top-left-radius: 4px;
						border-top-right-radius: 4px;
					}
				}

				&:last-child {
					.van-cell {
						border-bottom-left-radius: 4px;
						border-bottom-right-radius: 4px;
					}
				}
			}


		}

		.history-wx-list {
			margin: 20px;

			.history-wx-list-title {
				font-size: 12px;
				color: #999;
				margin-left: 5px;
			}

			.history-wx-item-box {
				.history-wx-item {
					background-color: #fff;
					border-radius: 4px;
					padding: 16px;
					margin-top: 12px;

					.history-wx-item-header {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.wx-item-header-left,
						.wx-item-header-right {
							font-size: 15px;
							color: #000;
							font-weight: 500;
						}

						.wx-item-header-right {
							font-size: 13px;
						}
					}

					.history-wx-item-content {
						margin-top: 15px;

						.history-wx-item-content-text {
							font-size: 12px;
							color: #888;
							margin-top: 5px;
						}
					}
				}
			}

			.no-history-wx-box {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding: 30px 0;
				background: #fff;
				border-radius: 4px;
				margin-top: 10px;

				.no-data-icon {
					width: 120px;
				}

				.no-data-text {
					font-size: 12px;
					color: #999;
					margin-top: 10px;
				}
			}
		}

		.result-btn {
			position: fixed;
			bottom: 40px;
			left: 15px;
			right: 15px;
			background-color: #008aff;
			color: #fff;
			font-size: 15px;
			height: 35pt;
			line-height: 35pt;

			&::after {
				border: none;
			}

			&:active {
				background-color: #0076DB;
			}
		}
	}
</style>
